import { colorStr } from '@/utils/utils';
import { Carousel } from 'antd';
import { useEffect } from 'react';
import { history } from 'umi';
import styles from '../index.less';

interface Props {
  color: string;
  pushImgList: any[];
}

const CarouselImg: React.FC<Props> = ({ color, pushImgList }) => {
  const contentStyle: React.CSSProperties = {
    height: '360px',
    color: color,
    lineHeight: '180px',
    textAlign: 'center',
    margin: '0 auto',
    background: colorStr(1),
  };

  useEffect(() => {}, []);

  return (
    <div className={styles.container}>
      <Carousel autoplay={true} className={styles.carousel}>
        {pushImgList.map((item: any) => {
          // let colorThief = new ColorThief();
          // colorThief.getColor(
          //   <img
          //     id={'resultPng'}
          //     src={`http://localhost:8090/dyh/upload_images/commodity/${item.img}`}
          //     alt={'加载失败'}
          //   />,
          //   [, 1],
          // );

          return (
            <div className={styles.carousels} key={item.id}>
              <h3 style={contentStyle}>
                <img
                  id={'resultPng'}
                  src={`http://localhost:8090/dyh/upload_images/commodity/${item.img}`}
                  alt={'加载失败'}
                  style={{ ...contentStyle, cursor: 'pointer' }}
                  onClick={() => {
                    history.push({
                      pathname: 'commodity',
                      query: {
                        lastRoute: '商城首页',
                        id: item.id,
                      },
                    });
                  }}
                />
              </h3>
            </div>
          );
        })}
      </Carousel>
    </div>
  );
};

export default CarouselImg;
